import { View, Image, StyleSheet } from 'react-native'
import Swiper from 'react-native-swiper'

export default function HomeCardSwiper() {
  return (
    <View style={style.lSwiper}>
      <SmallSwiper />
    </View>
  )
}
const style = StyleSheet.create({
  lSwiper: {
    borderRadius: 6,
    height: 206,
    backgroundColor: '#fff',
    marginBottom: 12,
    position: 'relative',
  },
  img: {
    resizeMode: 'cover',
    width: '100%',
    height: '100%',
    borderRadius: 6,
  },
  swiper: { height: '100%', borderRadius: 6 },
})
function SmallSwiper() {
  const list = [
    {
      id: 1,
      cover: require('../../assets/images/smallBanner1.jpg'),
    },
    {
      id: 2,
      cover: require('../../assets/images/smallBanner2.jpg'),
    },
  ]
  return (
    <Swiper
      key="smallSwiper"
      style={style.swiper}
      autoplay
      loop
      index={1}
      autoplayTimeout={4}
      activeDotColor="#f394a5"
      paginationStyle={{ bottom: 12 }}
      showsButtons={false}
      showsPagination
    >
      {list.map(item => (
        <Image key={item.id} source={item.cover} style={style.img} />
      ))}
    </Swiper>
  )
}
